<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>grid  area布局</title>
  <style>
    #page {
      display: grid;
      /* 1.设置display为grid */
      width: 100%;
      height: 250px;

      grid-template-areas: "head head"
        "nav  main"
        " nav  foot";
      /* 2.区域划分 当前为 三行 两列 */
      grid-template-rows: 50px 1fr 30px;
      /* 3.各区域 宽高设置 */
      grid-template-columns: 150px 1fr;
    }

    #page>header {
      grid-area: head;
      /* 4. 指定当前元素所在的区域位置, 从grid-template-areas选取值 */
      background-color: #8ca0ff;
    }

    #page>nav {
      grid-area: nav;
      background-color: #ffa08c;
    }

    #page>main {
      grid-area: main;
      background-color: #ffff64;
    }

    #page>footer {
      grid-area: foot;
      background-color: #8cffa0;
    }
  </style>
</head>

<body>
  <section id="page">
    <header>Header</header>
    <nav>Navigation</nav>
    <main>Main area</main>
    <footer>Footer</footer>
  </section>
</body>

</html>